<template>
    <div>
        <Form inline>
            <FormItem>
                <Input v-model="params.order_no" placeholder="输入订单编号"/>
            </FormItem>
            <FormItem>
                <Select v-model="params.type" placeholder="支付类型">
                    <Option value="">全部</Option>
                    <Option value="2">已支付</Option>
                    <Option value="1">未支付</Option>
                    <Option value="3">超时</Option>
                </Select>
            </FormItem>
            <FormItem>
                <Button type="success" @click="search">搜索</Button>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="outCsv">批量导出数据</Button>
            </FormItem>
        </Form>
        <wl-resource-table @payAction="payAction" @addAction="modalAdd" @editAction="edit" :params="params"
                           ref="wlTable"></wl-resource-table>
        <wl-resource-form
                :show="modelFormShow"
                :options="filitionOption"
                :filtrationFun="fun"
                @result="formResult"
                @cancelShow="cancelShow">
        </wl-resource-form>
        <Modal
                title="请用微信扫描二维码"
                v-model="payModel"
                @on-cancel="payModel=false"
                :closable="false">
            <div id="qrCode" ref="qrCodeDiv"></div>
            <div slot="footer">
                <Button type="primary" size="large" @click="payModel=false">关闭</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import WlResourceTable from './components/wl-resource-table/'
import WlResourceForm from '@/components/wl-resource-form/'
import { checkAcount, checkOrderStatus } from '@/api/user'
import QRcode from 'qrcodejs2'

export default {
  components: { WlResourceForm, WlResourceTable },
  data () {
    const validateAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('登录账号必须填写'))
      }
      // 模拟异步验证效果
      checkAcount(value).then(ret => {
        if (ret.data.errcode === 1001) {
          callback()
        } else {
          callback(new Error('该账号已经存在'))
        }
      })
    }
    return {
      apiRun: false,
      payModel: false,
      params: {
        login_name: '',
        type: ''
      },
      modelFormShow: false,
      fun: (data) => {
        if (this.type === 'add') {
          return data
        } else {
          return this.$common.xeUtils.pick(data, ['id', 'company_name', 'industry', 'address', 'main_product'])
        }
      },
      type: 'add',
      options: {
        // 表单属性 非必需
        formProps: {
          'label-width': 80
        },
        // 表单数据 必需
        formData: {
          id: '',
          login_name: '',
          password: '',
          company_name: '',
          industry: '',
          address: '',
          main_product: ''
        },
        // 表单项组件数据 必需
        formItem: [
          {
            type: 'input',
            key: 'login_name',
            label: '登录账号',
            props: {
              placeholder: '请输入登录的账号...'
            },
            rules: {
              validator: validateAge, trigger: 'blur'
            }
          },
          {
            type: 'input',
            label: '输入密码',
            key: 'password',
            props: {
              placeholder: ''
            },
            rules: {
              required: true,
              trigger: 'blur',
              message: '密码必须填写'
            }
          }, {
            type: 'input',
            label: '公司名称',
            key: 'company_name',
            props: {
              placeholder: ''
            },
            rules: {
              required: true,
              trigger: 'blur',
              message: '请输入公司名称'
            }
          }, {
            type: 'input',
            label: '行业',
            key: 'industry',
            props: {
              placeholder: ''
            }
          }, {
            type: 'input',
            label: '公司地址',
            key: 'address',
            props: {
              placeholder: ''
            }
          }, {
            type: 'input',
            label: '主营产品',
            key: 'main_product',
            props: {
              placeholder: ''
            }
          }
        ]
      }
    }
  },
  computed: {
    filitionOption () {
      if (this.type === 'add') {
        return this.options
      } else {
        let nowOption = JSON.parse(JSON.stringify(this.options))
        let data = []
        nowOption.formItem.forEach(item => {
          if (item.key !== 'password' && item.key !== 'login_name') {
            data.push(item)
          }
        })
        nowOption.formItem = data
        return nowOption
      }
    }
  },
  mounted () {
  },
  methods: {
    search () {
      this.$refs.wlTable.getList()
    },
    formResult (data) {
      if (data.errcode === 1001) {
        this.type === 'add' ? this.$Message.success('新增成功！') : this.$Message.success('编辑成功！')
        this.modelFormShow = false
        this.$refs.wlTable.getList()
      } else {
        this.$Message.success('增加失败！')
      }
    },
    edit (row) {
      this.type = 'edit'
      this.options.formData = row
      this.modelFormShow = true
    },
    modalAdd () {
      this.type = 'add'
      this.options.formData = {
        id: '',
        login_name: '',
        password: '',
        company_name: '',
        industry: '',
        address: '',
        main_product: ''
      }
      this.modelFormShow = true
    },
    cancelShow () {
      this.modelFormShow = false
    },
    payAction (row) {
      if (row.pay_type === 1) {
        window.open(row.pay_url)
        this.$Modal.confirm({
          title: '支付宝支付',
          content: '支付成功后点击确定按钮',
          okText: '支付成功',
          onOk: function () {
            checkOrderStatus(row.order_no).then(ret => {
              this.apiRun = false
              if (ret.data.errcode === 1001) {
                this.$Message.success('支付成功')
                location.reload()
              }
            }).catch(e => {
              this.apiRun = false
            })
          }
        })
      } else {
        this.order = row.order_no
        this.payModel = true
        this.$refs.qrCodeDiv.innerHTML = ''
        let qrcode = new QRcode('qrCode', {
          width: 200,
          height: 200, // 高度
          text: row.pay_url, // 二维码内容
          render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
          // background: '#f0f',
          // foreground: '#ff0'
        })
        console.log(qrcode)
      }
    },
    outCsv () {
      this.$refs.wlTable.outCsv()
    }
  }
}
</script>

<style scoped>
    .actionBtn {
        margin-right: 5px;
        margin-bottom: 5px;
    }

    .page {
        text-align: right;
        margin-top: 10px;
    }

    .input {
        width: 280px;
    }

    #qrCode {
        display: flex;
        justify-content: center;
    }
</style>
